<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <link rel="stylesheet" type="text/css" href="../../css/public.css" />
    <link rel="stylesheet" type="text/css" href="../../css/mobileSelect.css" />
    <script type="text/javascript" src="../../script/mobileSelect.js"></script>
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #F3EFEE;
        }

        .aui-active .aui-bar-tab-label {
            color: #f5a51c
        }

        .login {
            height: 240px;
            background-image: -webkit-linear-gradient(0deg, #f5c674, #ed824c);
            /*background-image: url(../../image/personal_bkg.jpg);background-repeat: no-repeat; background-size: cover;*/
            position: relative;
        }

        .login .personal_logo {
            width: 4rem;
            height: 4rem;
            border-radius: 50%;
            margin: 0 auto 9px;
            /*position: absolute; top: 60px; left: 20px;*/
        }

        .login .userinfo {
            position: absolute;
            top: 60px;
            text-align: center;
            left: 0;
            right: 0;
        }

        .login .userinfo .title {
            font-size: 0.8rem;
            color: #fff;
        }
        /* 设置条目 */

        .item {
            height: 3rem;
            line-height: 3rem;
            padding-left: 0.7rem;
            background-color: #fff;
        }

        .item_ico {
            float: left;
            width: 2.3rem;
            padding: 0.7rem 0.7rem 0.7rem 0;
        }

        .item_arrow {
            float: right;
            width: 1.5rem;
            padding: 1rem 0.7rem 1rem 0;
        }

        .item span {
            font-size: 0.7rem;
        }

        [v-cloak] {
            display: none;
        }

        .aui_list {
            background-image: linear-gradient(0, #eee, #eee 50%, transparent 50%);
        }

        .aui-list-item {
            background-image: linear-gradient(0, #eee, #eee 50%, transparent 50%) !important;
        }

        .aui-radio:checked {
            background: #f23030;
            border-color: #f23030;
            width: 0.8rem;
            height: 0.8rem;
            position: relative;
            top: 0.25rem;
            margin-right: 0.5rem;
        }

        .aui-toast-content {
            color: #fff;
        }

        [v-cloak] {
            display: none;
        }

        .textStyle {
            color: #999
        }

        .applyBtn {
            width: 79vw;
            height: 2.3rem;
            color: #fff;
            text-align: center;
            line-height: 2.3rem;
            background:#f23030;
            margin: 0 auto;
            border-radius: 1.5rem;
        }

        .cardImg {
            width: 97%;
            height: 97%
        }

        .cardText {
            font-size: 0.6rem;
            color: #999;
            margin-top: 0.2rem;
        }

        .imgDiv {
            border: 1px solid #eee;
            padding: 0.5rem;
            width: 40vw;
            height: 5rem;
        }

        .cardContent {
            display: flex;
            align-items: center;
            justify-content: space-around;
            margin-top: 0.2rem;
            padding: 0.5rem 0 0.5rem 0;
        }

        .aui-toast-content {
            color: #fff;
        }
        /*图片列表*/

        .imgs_box {
            background-image: none!important;
            width: 100%;
        }

        .img_list_box {
            background-image: none!important;
            padding-left: 0!important;
            padding-right: 0.75rem!important;
        }

        .img_box img {
            border-radius: 0.2rem;
        }

        .img_box {
            position: relative;
        }

        .img_box .remove_img_btn {
            position: absolute;
            right: 0.2rem;
            top: 0.2rem;
            background: red;
            width: 0.7rem;
            height: 0.7rem;
            line-height: 0.7rem;
            text-align: center;
            border-radius: 50%;
            color: #fff;
        }

        .not_show {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app" style="overflow-x:hidden">

        <div class="user_nav_line"></div>
        <div class="aui-refresh-content">
            <ul class="aui-list aui-form-list">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label" style="width: 29%;">
                            商家姓名
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="请填写姓名" style="font-size: 0.7rem;" v-model="realname">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label" style="width: 29%;">
                            联系方式
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="请填写联系方式" style="font-size: 0.7rem;" v-model="mobile">
                        </div>
                    </div>
                </li>
                <li>
                    <div class="user_nav_line"></div>
                </li>
                <li class="aui-list-item applyTopMargin">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label" style="width: 29%;">
                            门店名称
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="不超过10个字" maxlength="10" style="font-size: 0.7rem;" v-model="name">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-title aui-font-size-14">店铺简介</div>
                        <div class="aui-list-item-right" style="margin-right:0.75rem">{{num}}/100</div>
                    </div>
                </li>
                <li>
                    <textarea placeholder="请简单的介绍一下您的店铺吧~" maxlength="100" placeholder-class="textStyle" style="width: 100vw;font-size: 0.7rem;padding-left:0.75rem;padding-right:0.75rem;height:7rem;" v-model="title"></textarea>
                </li>
                <li>
                    <div class="user_nav_line"></div>
                </li>
                <li class="aui-list-item applyTopMargin">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label" style="width: 29%;">
                            身份证号
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="请填写身份证号" style="font-size: 0.7rem;" v-model="cardId">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-title aui-font-size-14">请上传身份证照片</div>
                    </div>
                </li>
                <li class="cardContent aui-list-item" style="padding:0.5rem 0;">
                    <div style="margin-right:0.5rem;margin-left:0.5rem;text-align:center" @click="tast('1')">
                        <div class="imgDiv">
                            <img :src=card_pic[0] class="cardImg" />
                        </div>
                        <div class="cardText">请上传身份证正面照片</div>
                    </div>
                    <div style="margin-right:0.5rem;text-align:center" @click="tast('2')">
                        <div class="imgDiv">
                            <img :src=card_pic[1] class="cardImg" />
                        </div>
                        <div class="cardText">请上传身份证反面照片</div>
                    </div>
                </li>

                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-title aui-font-size-14">请上传门店logo和营业执照</div>
                    </div>
                </li>
                <li class="cardContent aui-list-item" style="padding:0.5rem 0;">
                    <div style="margin-right:0.5rem;margin-left:0.5rem;text-align:center" @click="tast('3')">
                        <div class="imgDiv">
                            <img :src=no_logo_img class="cardImg" />
                        </div>
                        <div class="cardText">请上传门店logo</div>
                    </div>
                    <div style="margin-right:0.5rem;text-align:center" @click="tast('4')">
                        <div class="imgDiv">
                            <img :src=no_thumbs_img class="cardImg" />
                        </div>
                        <div class="cardText">请上传营业执照</div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-title aui-font-size-14">店铺实景图</div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <ul class="aui-list aui-media-list imgs_box">
                        <li class="aui-list-item img_list_box">
                            <div class="aui-list-item-inner">
                                <div class="aui-row aui-row-padded" style="width: 100%;margin:0;">
                                    <div v-for="(src,index) in outdoor_scene" class="aui-col-xs-4 img_box">
                                        <div class="img" :style="'background:url('+src+') center/cover no-repeat;'"></div>
                                        <div class="remove_img_btn" @click="remove_img(index)">×</div>
                                    </div>
                                    <div class="aui-col-xs-4" @click="add_imgs()" :class="{not_show:show}">
                                        <img src="../../image/four/add_img.png" />
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </li>
                <li>
                    <div class="user_nav_line"></div>
                </li>

                <li class="aui-list-item">
                    <div class="aui-list-item-inner  aui-list-item-arrow">
                        <div class="aui-list-item-title aui-font-size-14">商家地址</div>
                        <div class="aui-list-item-right" style="margin-right:1.1rem" @click="addAbout">{{usercity}}</div>
                    </div>
                </li>

                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label" style="width: 29%;">
                            详细地址
                        </div>
                        <div class="aui-list-item-input">
                            <input type="text" placeholder="请填写详细地址" style="font-size: 0.7rem;" v-model="address">
                        </div>
                    </div>
                </li>

                <li class="aui-list-item">
                    <div class="aui-list-item-inner  aui-list-item-arrow">
                        <div class="aui-list-item-title aui-font-size-14">店铺类型</div>
                        <div class="aui-list-item-right" style="margin-right:1.1rem" @click="chose_lx()">{{dp_lx}}</div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner  aui-list-item-arrow">
                        <div class="aui-list-item-title aui-font-size-14">店铺分类</div>
                        <div class="aui-list-item-right" style="margin-right:1.1rem" @click="chose_fl()"><span id="day">{{dp_fl}}</span></div>
                    </div>
                </li>

                <li style="background: #F3EFEE;padding-top:1.5rem;padding-bottom:1.5rem;width: 100vw;">
                    <div class="applyBtn" @click="storeCreate">提交申请</div>
                </li>
            </ul>
        </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<!-- <script type="text/javascript" src="../../script/zepto.js"></script> -->
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript" src="../../script/aui-popup.js"></script>
<script type="text/javascript" src="../../script/aui-dialog.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js"></script>
<script type="text/javascript" src="../../script/address_data.js"></script>

<script type="text/javascript">
    apiready = function() {
        // alert($api.getStorage('city'))
        api.addEventListener({
            name: 'chose_map'
        }, function(ret, err) {
            if (ret) {
                vm.usercity = ''
                vm.usercity += ret.value.province;
                vm.usercity += ret.value.city;
                vm.usercity += ret.value.district;
                vm.province = ret.value.province;
                vm.city = ret.value.city;
                vm.district = ret.value.district;
                vm.address = ret.value.address;

                vm.get_dpejfl();
            } else {
                alert(JSON.stringify(err));
            }
        });


        var pics = {};
        var toast = new auiToast({});
        var vm = new Vue({
            el: '#app',
            data: {
                realname: "",
                mobile: "",
                name: "",
                title: "",
                cardId: "",
                logo: "",
                card_pic: ['../../image/my/cardReverce.png', '../../image/my/cardPositive.png'],
                card_pic1: "",
                card_pic2: "",
                thumbs: "",
                no_logo_img: '../../image/my/no_img.png',
                no_thumbs_img: '../../image/my/no_img.png',
                is_local: 2,
                address: "",
                outdoor_scene: [],
                province: "",
                city: "",
                district: "",
                num: 0,
                usercity: '请选择',
                show: false,
                dp_lx: "请选择",
                dp_fl: "请选择",
                dp_fl_arr: [],
                dp_fl_arr2: [],
                scate_id: 0,
                longitude: 0,
                latitude: 0,
                dpejfl: [],
            },
            created: function() {
                var _this = this;
                // _this.get_dpejfl();
                // api.ajax({
                //     url: window.Url.Freestorecate_index,
                //     method: 'post',
                // }, function(ret, err) {
                //     if (ret) {
                //         for (var i = 0; i < ret.data.scatelist.length; i++) {
                //             _this.dp_fl_arr.push(ret.data.scatelist[i].classname)
                //         }
                //         _this.dp_fl_arr2 = ret.data.scatelist;
                //     } else {
                //         alert(JSON.stringify(err));
                //     }
                // });

                var bMap = api.require('bMap');
                bMap.getLocation({
                    accuracy: '100m',
                    autoStop: true,
                    filter: 1
                }, function(ret, err) {
                    if (ret.status) {
                        _this.longitude = ret.lon;
                        _this.latitude = ret.lat;
                    } else {
                        alert(err.code);
                    }
                });
            },
            mounted: function() {
                var _this = this;
                // _this.get_dpejfl();
            },
            methods: {
                //验证身份证
                isCardNo: function(card) {
                    var reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                    if (reg.test(card) === false) {
                        toast.fail({
                            title: "身份证输入不合法",
                            duration: 1000
                        })
                        return;
                    }
                },
                //提交店铺申请
                storeCreate: function() {
                    var _this = this;
                    if (_this.realname == "" || _this.name == "" || _this.title == "" || (_this.is_local != 0 && _this.is_local != 1)) {
                        toast.fail({
                            title: "请填写完整信息",
                            duration: 1000
                        });
                        return;
                    }
                    if (JSON.stringify(pics) == "{}") {
                        toast.fail({
                            title: "请上传门店照片",
                            duration: 1000
                        });
                        return;
                    }

                    if (_this.card_pic1 == "" || _this.card_pic2 == "") {
                        toast.fail({
                            title: "请上传身份证照片",
                            duration: 1000
                        });
                        return;
                    }

                    if (_this.logo == "" || _this.thumbs == "") {
                        toast.fail({
                            title: "请上logo或营业执照照片",
                            duration: 1000
                        });
                        return;
                    }

                    if (_this.cardId == "") {
                        toast.fail({
                            title: "请填写身份证号",
                            duration: 1000
                        });
                        return;
                    } else {
                        _this.isCardNo(_this.cardId);
                    }

                    if (_this.mobile == "") {
                        toast.fail({
                            title: "请填写手机号",
                            duration: 1000
                        });
                        return;
                    } else if (!checkMobile(_this.mobile)) {
                        toast.fail({
                            title: "手机号错误",
                            duration: 2000
                        });
                        return;
                    }
                    api.showProgress({
                        style: 'default',
                        animationType: 'fade',
                        title: '努力加载中...',
                        text: '先喝杯茶...',
                        modal: false
                    });
                    var imgs1 = {
                        logo: _this.logo,
                        card_pic1: _this.card_pic1,
                        card_pic2: _this.card_pic2,
                        thumbs: _this.thumbs
                    }
                    var img_obj = {};
                    $.extend(img_obj, imgs1, pics);

                    api.ajax({
                        url: window.Url.Freestore_addStore,
                        method: 'post',
                        data: {
                            values: {
                                token: $api.getStorage('token'),
                                realname: _this.realname,
                                // var encodedString = Base64.encode(string)
                                mobile: Base64.encode("UNO" + _this.mobile + "HACHA"),
                                name: _this.name,
                                title: _this.title,
                                cardId: Base64.encode("UNO" + _this.cardId + "HACHA"),
                                is_local: _this.is_local,
                                address: _this.address,
                                province: _this.province,
                                city: _this.city,
                                district: _this.district,
                                scate_id: _this.scate_id,
                                longitude: _this.longitude,
                                latitude: _this.latitude
                            },
                            files: img_obj
                        }
                    }, function(ret, err) {
                        api.hideProgress();

                        if (ret.re == 1) {
                            toast.success({
                                title: ret.info,
                                duration: 1000
                            })
                            api.closeWin({});
                        } else {
                            toast.fail({
                                title: ret.info,
                                duration: 1000
                            })
                        }
                    });

                },
                //详细地址
                addAbout: function() {
                    var _this = this;

                    api.openWin({
                        name: 'mysubordinates',
                        url: './headerone.html',
                        pageParam: {
                            msg: '选择地址',
                            // url: './mysubordinates.html'
                            url: './chose_map_address.html',
                            bj_type: "点"
                        }
                    });
                },
                //上传身份证照片
                tast: function(type) {
                    var _this = this;
                    api.actionSheet({
                        title: '上传身份证照片',
                        cancelTitle: '取消',
                        buttons: ['图片', '拍照']
                    }, function(ret, err) {

                        if (ret.buttonIndex == 2) {
                            _this.personImg('camera', type)
                        } else if (ret.buttonIndex == 1) {
                            _this.personImg('library', type)
                        }

                    });
                },
                personImg: function(type, index) {
                    var _this = this;
                    api.getPicture({
                        sourceType: type,
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        destinationType: 'url',
                        allowEdit: true,
                        quality: 100,
                        saveToPhotoAlbum: false
                    }, function(ret, err) {
                        if (ret) {
                            if (ret.data != '' && index == 1) {
                                Vue.set(vm.card_pic, 0, ret.data)
                                _this.card_pic1 = ret.data;
                            } else if (ret.data != '' && index == 2) {
                                Vue.set(vm.card_pic, 1, ret.data)
                                _this.card_pic2 = ret.data;
                            } else if (ret.data != '' && index == 3) {
                                _this.no_logo_img = ret.data;
                                _this.logo = ret.data;
                            } else if (ret.data != '' && index == 4) {
                                _this.no_thumbs_img = ret.data;
                                _this.thumbs = ret.data
                            }
                        }

                    });

                },
                // 店铺类型
                chose_lx: function() {
                    var _this = this;
                    api.actionSheet({
                        title: '选择店铺类型',
                        cancelTitle: '取消',
                        buttons: ['源头店铺', '本地店铺']
                    }, function(ret, err) {

                        if (ret.buttonIndex == 2) {
                            _this.dp_lx = "本地店铺";
                            _this.is_local = 1;
                        } else if (ret.buttonIndex == 1) {
                            _this.dp_lx = "源头店铺";
                            _this.is_local = 0;
                        }

                    });
                },
                // 店铺分类
                chose_fl: function() {
                    var _this = this;
                    // api.actionSheet({
                    //     title: '选择店铺类型',
                    //     cancelTitle: '取消',
                    //     buttons: _this.dp_fl_arr
                    // }, function(ret, err) {
                    //
                    //     if (ret.buttonIndex <= 8) {
                    //         _this.dp_fl = _this.dp_fl_arr2[ret.buttonIndex - 1].classname;
                    //         _this.scate_id = _this.dp_fl_arr2[ret.buttonIndex - 1].scate_id;
                    //     }
                    //
                    // });

                },
                // 添加图片
                add_imgs: function() {
                    var $_this = this;
                    var UIMediaScanner = api.require('UIMediaScanner');
                    UIMediaScanner.open({
                        type: 'picture',
                        column: 3,
                        classify: false,
                        max: 9 - $_this.outdoor_scene.length,
                        sort: {
                            key: 'time',
                            order: 'desc'
                        },
                        texts: {
                            stateText: '已选择*',
                            cancelText: '取消',
                            finishText: '完成'
                        },
                        styles: {
                            bg: '#f7f7f7',
                            mark: {
                                icon: '',
                                position: 'top_right',
                                size: 20
                            },
                            nav: {
                                bg: '#f7f7f7',
                                stateColor: '#000',
                                stateSize: 18,
                                cancelBg: 'rgba(0,0,0,0)',
                                cancelColor: '#999',
                                cancelSize: 16,
                                finishBg: 'rgba(0,0,0,0)',
                                finishColor: '#ff0036',
                                finishSize: 16
                            }
                        },
                        exchange: true,
                        rotation: true
                    }, function(ret) {
                        if (ret) {
                            if (ret.list) {
                                $_this.img_num = ret.list.length;
                                for (var i = 0; i < ret.list.length; i++) {
                                    $_this.outdoor_scene.push(ret.list[i].path);
                                    pics["outdoor_scene" + i + ""] = ret.list[i].path;
                                }
                                $_this.$nextTick(function() {
                                    $('.img').height($('.img').width())

                                    if ($_this.outdoor_scene.length >= 9) {
                                        $_this.show = true;
                                    } else {
                                        $_this.show = false;
                                    }
                                })
                            } else {
                                console.log('未选择图片');
                            }
                        }
                    });

                },
                // 删除当前图片
                remove_img: function(index) {
                    var $_this = this;
                    $_this.outdoor_scene.splice(index, 1);
                    delete pics["outdoor_scene" + index];

                    if ($_this.outdoor_scene.length >= 9) {
                        $_this.show = true;
                    } else {
                        $_this.show = false;
                    }
                },
                // 获取店铺分类二级分类
                get_dpejfl: function() {
                    var _this = this;
                    api.ajax({
                        url: window.Url.Freestorecate_getall,
                        method: 'post',
                        data:{
                          values:{
                            city:_this.city
                          }
                        }
                    }, function(ret, err) {
                        if (ret) {

                            if (ret.re == 1) {
                                _this.dpejfl = ret.data.scatelist;
                                console.log('店铺所有分类-----' + JSON.stringify(_this.dpejfl));

                                _this.$nextTick(function() {
                                    var mobileSelect1 = new MobileSelect({
                                        trigger: '#day',
                                        title: '选择店铺分类',
                                        wheels: [{
                                            data: _this.dpejfl
                                        }],
                                        position: [0, 0],
                                        callback: function(indexArr,  data) {          
                                          // console.log(JSON.stringify(indexArr));  //返回选中的json数据
                                            // console.log(JSON.stringify(data));  //返回选中的json数据
                                            _this.scate_id = _this.dpejfl[indexArr[0]].childs[indexArr[1]].id;
                                        } 
                                    });
                                })
                            }
                        } else {
                            alert(JSON.stringify(err));
                        }
                    });

                }
            },
            watch: {
                storeAbout: function(val) {
                    if (val.length != 101) this.num = val.length;
                }
            }
        })
    };
</script>

</html>
